import {useEffect } from 'react';
import {View} from "@tarojs/components";
import { EChart } from "echarts-taro3-react";

export default function Tb() {
  let pieChart = null
  const option = {
    title: {
      text: "某站点用户访问来源",
      subtext: "纯属虚构",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      orient: "horizontal",
      bottom: "bottom",
      data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: "55%",
        center: ["50%", "50%"],
        data: [
          { value: 335, name: "直接访问" },
          { value: 310, name: "邮件营销" },
          { value: 234, name: "联盟广告" },
          { value: 135, name: "视频广告" },
          { value: 1548, name: "搜索引擎" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked  times`;
    console.log('pieChart', pieChart, option)
    //
    setTimeout(() => {
      pieChart.refresh(option);
    }, 1000)
  });
  const refPieChart = (node) => (pieChart = node);
  console.log('111')
  return (
    <View className='pie-chart'>
      <EChart ref={refPieChart} canvasId='pie-chart' />
    </View>
  )
}
